import React, { useState, useEffect } from "react";
import { CCol, CRow, CToastHeader, CToastBody, CToaster, CModalFooter, CButton, CSpinner, CToast } from '@coreui/react';
import { useSelector } from 'react-redux';

import exampleImage from './logo.png';

const FirstPage = () => {
    const role = useSelector((state) => state.role);
    const [absences, setAbsences] = useState([]);
    const token = useSelector((state) => state.token);
    const [isLoading, setIsLoading] = useState(true);
    const [toasts, setToasts] = useState([]);

    useEffect(() => {
        if (role === 'hr') {
            fetch(`${process.env.REACT_APP_SERVER_ADDRESS}/api/v1/users/absent/`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
            })
          .then(response => response.json())
          .then(data => {
                data.forEach(absence => {
                    setToasts(prevToasts => [...prevToasts, { id: Date.now(), header: 'Уведомление', color: 'info', message: `${absence.reason} - ${absence.user} - с ${absence.start_absent} на ${absence.quantity_days} день/дней.` }]);
                });
                
                setIsLoading(false);
            })
          .catch(error => {
                console.error('Error fetching absences:', error);
                setIsLoading(false);
            
            });
        }
        
    }, []);

    useEffect(() => {
        fetch(`${process.env.REACT_APP_SERVER_ADDRESS}/api/v1/schedule/approved_schedule`, {
            method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
        })
         .then(response => response.json())
         .then(data => {
              if (data.name) {
                  setToasts(prevToasts => [...prevToasts, { id: Date.now(), header: 'Уведомление', color: 'success', message: `Утверждено новое расписание ${data.name}` }]);
              }
          })
         .catch(error => {
              console.error('Error fetching approved schedule:', error);
          });
    }, []);

    return (
        <div>
            <img src={exampleImage} alt="Описание изображения" />
            <br></br>
            <br></br>
            <br></br>
            <CRow>
                <CCol xs={8}>
                    <h1>Задача 9 ЛЦТ-2024</h1>
                </CCol>
                <CCol xs={4}>
                    
                </CCol>
            </CRow>
            <br></br>
            <br></br>
            <br></br>
            Приложение разработано согласно задаче 9 ЛЦТ-2024 и предназначено для автоматизированного составления расписания работы врачей в зависимости от предполагаемого количества исследований и компетенций специалистов.
            <br></br>
            Это приложение позволяет: 
            <ul>
                <li>
                    проанализировать накопленную статистику рентгенологических исследований
                </li>
                <li>
                    сформировать прогноз на несколько недель вперед
                </li>
                <li>
                    проанализировать сформированный прогноз
                </li>
                <li>
                    сформировать расписание работы специалистов на основе прогноза
                </li>
                <li>
                    посмотреть сформированное расписание
                </li>
                <li>
                    создавать новых пользователей
                </li>
                <li>
                    вносить изменения в карточку пользователя
                </li>
                <li>
                    разделяет пользователей по ролям и отображает соответствующий функционал
                </li>
            </ul>

            <CToaster className="position-static" placement='bottom-end'>
                {toasts.map(toast => (
                    <CToast key={toast.id} autohide={false} visible={true}>
                    <CToastHeader closeButton>
                    <svg
                        className="rounded me-2"
                        width="20"
                        height="20"
                        xmlns="http://www.w3.org/2000/svg"
                        preserveAspectRatio="xMidYMid slice"
                        focusable="false"
                        role="img"
                    >
                        <rect width="100%" height="100%" fill="#007aff"></rect>
                    </svg>
                    <div className="fw-bold me-auto">Уведомление</div>
                    </CToastHeader>
                    <CToastBody>{toast.message}</CToastBody>
                </CToast>
                ))}
            </CToaster>
        </div>
    );
};

export default FirstPage;
